<template>
  <div>
    <!-- 骨架标题 -->
    <div class="h-8 w-3/4 bg-gray-200 dark:bg-gray-700 rounded mb-4 animate-pulse"></div>

    <!-- 标题占位结束 -->

    <!-- Meta 信息骨架 -->
    <div
      class="flex flex-wrap justify-start items-center text-sm text-gray-500 dark:text-gray-400 mt-5 px-2 sm:px-0"
    >
      <!-- 作者头像 -->
      <div class="flex items-center mr-6 mb-2">
        <div class="w-6 h-6 mr-2 rounded-full bg-gray-300 dark:bg-gray-600 animate-pulse"></div>
        <div class="w-20 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
      </div>

      <!-- 其他 Meta 信息 (模拟5项) -->
      <div v-for="i in 5" :key="i" class="flex items-center mr-6 mb-2">
        <div class="w-3 h-3 mr-2 rounded-full bg-gray-300 dark:bg-gray-600 animate-pulse"></div>
        <div
          class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"
          :style="{ width: `${40 + i * 10}px` }"
        ></div>
      </div>
    </div>
  </div>
</template>
